<template>
    <div id="school-table">
        <Row :gutter="16">
            <i-col span="12" v-for="school in schools" :key="school.id">
                <Card class="school-card">
                    <p slot="title" class="school-card-title">
                        <Icon type="university"></Icon>
                        {{school.name}}
                    </p>
                    <Row>
                        <i-col span="8">
                            <img :src="school.imagePath + school.image" class="school-img">
                        </i-col>
                        <i-col span="16">
                            <p>{{school.introduce}}</p>
                        </i-col>
                    </Row>
                </Card>
            </i-col>
        </Row>
    </div>
</template>

<script>
    import Axios from "../../axios";

    export default {
        name: "school-table",
        props: {
            type: 0
        },
        data() {
            return {
                schools: []
            }
        },
        mounted() {
            Axios.get("/schools?type=" + this.type).then((response) => {
                if (response.status === 200) {
                    this.schools = response.data;
                } else {
                    this.$Message.error("获取教学点信息失败。");
                }
            });
        },
        methods: {}
    }
</script>

<style lang="less" scoped>
    .school-img {
        width: 240px;
        height: 180px;
    }

    .school-card {
        background-color: rgba(255, 255, 255, 0.1);
        margin-bottom: 8px;
    }

    .school-card p {
        font-size: 24px;
    }

    .school-card-title {
        height: 24px;
        color: #ffffff;
    }
</style>